<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户安全管理系统</title>
    <!-- zui-->
    <link href="css/metisMenu.min.css" rel="stylesheet"> 
    <link href="css/zui.min.css" rel="stylesheet"> 
	<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="js/jquery.js"></script>
     <!-- ZUI Javascript组件-->
    <script src="js/metisMenu.min.js"></script>
    <script src="js/zui.min.js"></script>
	<!--[if lt IE 9]>
    <script src="lib/ieonly/html5shiv.js"></script>
    <script src="lib/ieonly/respond.js"></script>
    <![endif]-->
	<style>
		
		#navbar{
			width:200px;
		}
		.navbar-default {
			background-color:rgb(223,223,223);
		}
        .navbar-default .navbar-nav > .active > a,
        .navbar-default .navbar-nav > .active > a:hover,
        .navbar-default .navbar-nav > .active > a:focus {
          color: #555;
          background-color: #83ceed;
        }
        .navbar-default .navbar-nav > li > a:hover,
        .navbar-default .navbar-nav > li > a:focus {
          color: #222;
          background-color: #2e8cb2;
        }
        .navbar-fixed-left.navbar-collapsed .navbar-nav.collapsed > li.nav-heading,
        .navbar-fixed-left.navbar-collapsed .navbar-nav.collapsed > li.nav-heading:before {
          content: "\e6e1";
          
        }
        .navbar-fixed-left.navbar-collapsed .navbar-nav > li.nav-heading:before {
          position: absolute;
          top: 5px;
          left: 13px;
          display: inline-block;
          font-family: ZenIcon;
          content: "W";
          opacity: .4;
          -webkit-transition: all .5s cubic-bezier(.175, .885, .32, 1);
               -o-transition: all .5s cubic-bezier(.175, .885, .32, 1);
                  transition: all .5s cubic-bezier(.175, .885, .32, 1);
        }
        .navbar-fixed-left.navbar-collapsed.navbar-default .navbar-nav > li.nav-heading:hover {
          color: #404040;
          background-color: #e3e3e3;
        }
        .navbar-fixed-left.navbar-collapsed.navbar-inverse .navbar-nav > li.nav-heading:hover {
          color: #eaeaea;
          background-color: #114ba8;
        }
        /*一级菜单*/
		.menu-first{
			height:45px;
			line-height:45px;
			background-color: #e9e9e9;
			border-top: 1px solid #efefef;
			border-bottom: 1px solid #e1e1e1;
			padding: 0;
			font-size: 14px;
			font-weight: normal;
			text-align: center;
		}
		/*一级菜单鼠标划过状态*/
		.nav-heading:hover{
			text-decoration: none;
			background-color: #83ceed;
			//border-top: 1px solid #b7b7b7;
			//border-bottom: 1px solid #acacac;
		}
		/*二级菜单*/
		.menu-second li a{
			background-color: #f6f6f6;
			height:31px;
			line-height:31px;
			border-top: 1px solid #efefef;
			border-bottom: 1px solid #efefef;
			font-size: 12px;
			text-align:center;
		}
		/*二级菜单鼠标划过样式*/
		.menu-second li a:hover {
			text-decoration: none;
			background-color: #66c3ec;
			border-top: 1px solid #83ceed;
			border-bottom: 1px solid #83ceed;
			border-right: 3px solid #f8881c;
			border-left: 3px solid #66c3ec;
		}
		/*二级菜单选中状态*/
		.menu-second-selected {
			background-color: #66c3ec;
			height:31px;
			line-height:31px;
			border-top: 1px solid #83ceed;
			border-bottom: 1px solid #83ceed;
			border-right: 3px solid #f8881c;
			border-left: 3px solid #66c3ec;
			text-align:center;
		}
	</style>
	
  </head>
  
  <body>
  
	<div class="container">
		<div class="row">
			<div class="cl-lg-1">
				<nav id="navbar" class="navbar navbar-default navbar-fixed-left navbar-collapsed" role="navigation">
				  <div class="collapse navbar-default navbar-collapse" id="navbar-collapse">
					<ul class="nav navbar-nav collapsed">
					  <li class="nav-heading">开始</li>
					  <li><a href="/docs/start.html#intro"><i class="icon-th"></i> 说明</a></li>  
					  <li><a href="/docs/start.html#about">约定</a></li>
					  <li><a href="/docs/start.html#files">文件目录结构</a></li>
					  <li><a href="/docs/start.html#edition">选择版本</a></li>
					  <li><a href="/docs/start.html#grunt">编译及定制</a></li>
					  <li><a href="/docs/start.html#browsers">受支持的平台</a></li>
					</ul>
					<ul class="nav navbar-nav collapsed">
					  <li class="nav-heading">基础</li>
					  <li><a href="/docs/basic.html#hello">Hello world</a></li>
					  <li><a href="/docs/basic.html#global">全局样式表</a></li>
					  <li><a href="/docs/basic.html#ie">兼容IE浏览器</a></li>
					  <li><a href="/docs/basic.html#responsive">响应式设计</a></li>
					  <li><a href="/docs/basic.html#grid">栅格系统</a></li>
					  <li><a href="/docs/basic.html#typography">文字排版</a></li>
					  <li><a href="/docs/basic.html#utilities">辅助类</a></li>
					  <li><a href="/docs/basic.html#scrollbars">滚动条</a></li>
					  <li><a href="/docs/basic.html#colorset">配色</a></li>
					  <li><a href="/docs/basic.html#themes">主题</a></li>
					</ul>
					<ul class="nav navbar-nav collapsed">
					  <li class="nav-heading">控件</li>
					  <li><a href="/docs/controls.html#icons">图标</a></li>
					  <li><a href="/docs/controls.html#button">按钮</a></li>
					  <li><a href="/docs/controls.html#progressbar">进度条</a></li>
					  <li><a href="/docs/controls.html#labels">标签</a></li>
					  <li><a href="/docs/controls.html#textbox">文本框</a></li>
					  <li><a href="/docs/controls.html#breadcrumb">面包屑</a></li>
					  <li><a href="/docs/controls.html#images">图片</a></li>
					  <li><a href="/docs/controls.html#headers">标题</a></li>
					  <li><a href="/docs/controls.html#dividers">分隔</a></li>
					</ul>
					<ul class="nav navbar-nav collapsed" >
					  <li class="nav-heading">组件</li>
					  <li><a href="/docs/components.html#alerts">消息框</a></li>
					  <li><a href="/docs/components.html#code">代码</a></li>
					  <li><a href="/docs/components.html#inputgroup">输入组</a></li>
					  <li><a href="/docs/components.html#listgroup">列表组</a></li>
					  <li><a href="/docs/components.html#navs">导航</a></li>
					  <li><a href="/docs/components.html#navbars">导航条</a></li>
					  <li><a href="/docs/components.html#menu">垂直菜单</a></li>
					  <li><a href="/docs/components.html#pagers">分页器</a></li>
					  <li><a href="/docs/components.html#panels">面板</a></li>
					  <li><a href="/docs/components.html#tables">表格</a></li>
					  <li><a href="/docs/components.html#buttongroup">按钮组</a></li>
					</ul>
					<ul class="nav navbar-nav collapsed">
					  <li class="nav-heading">JS插件</li>
					  <li><a href="/docs/javascript.html#store">本地存储</a></li>
					  <li><a href="/docs/javascript.html#modals">模态框</a></li>
					  <li><a href="/docs/javascript.html#modaltrigger">模态框触发器</a></li>
					  <li><a href="/docs/javascript.html#dropdowns">下拉菜单</a></li>
					  <li><a href="/docs/javascript.html#tabs">标签页</a></li>
					  <li><a href="/docs/javascript.html#messager">漂浮消息</a></li>
					  <li><a href="/docs/javascript.html#tooltips">提示消息</a></li>
					  <li><a href="/docs/javascript.html#popovers">弹出框</a></li>
					  <li><a href="/docs/javascript.html#collapse">折叠</a></li>
					  <li><a href="/docs/javascript.html#carousel">轮播</a></li>
					  <li><a href="/docs/javascript.html#datetimepicker">日期选择</a></li>
					  <li><a href="/docs/javascript.html#chosen">Chosen</a></li>
					  <li><a href="/docs/javascript.html#kindeditor">富文本编辑器</a></li>
					  <li><a href="/docs/javascript.html#droppable">拖放</a></li>
					  <li><a href="/docs/javascript.html#autotrigger">自动触发器</a></li>
					</ul>
					<ul class="nav navbar-nav collapsed">
					  <li class="nav-heading">视图</li>
					  <li><a href="/docs/views.html#datatable">数据表格</a></li>
					  <li><a href="/docs/views.html#calendar">日历</a></li>
					  <li><a href="/docs/views.html#forms">表单</a></li>
					  <li><a href="/docs/views.html#article">文章</a></li>
					  <li><a href="/docs/views.html#card">卡片</a></li>
					  <li><a href="/docs/views.html#list">列表</a></li>
					  <li><a href="/docs/views.html#comment">评论</a></li>
					  <li><a href="/docs/views.html#board">看板</a></li>
					  <li><a href="/docs/views.html#dashboard">仪表盘</a></li>
					</ul>
					<ul class="nav navbar-nav collapsed">
					  <li class="nav-heading">探索</li>
					  <li><a href="/docs/explore.html#sourcecode">下载源码</a></li>
					  <li><a href="/docs/explore.html#cases">这些网站在使用</a></li>
					</ul>
				  </div>
				</nav>
			</div>
		</div>		
	</div>
	<script>
	
	
	  // navbar collapse
        $('#navbar-collapse').find('.nav > .nav-heading').click(function(){
            var $nav = $(this).closest('.nav');
            if($nav.hasClass('collapsed')){
                $('.navbar-collapsed .nav').not($nav).children('li:not(.nav-heading)').slideUp('normal', function(){
                    $(this).closest('.nav').addClass('collapsed');
                });
                if($(window).width() < 767){
					
                }
                $nav.removeClass('collapsed').children('li:not(.nav-heading)').slideDown('normal');
            }
            else{
                
				$nav.children('li:not(.nav-heading)').slideUp('normal', function(){$nav.addClass('collapsed');});
            }
        });
</script>	
</html>
